import React, {
  Component,
  PropTypes
} from 'react';

import {
  PAGE_LOADING,
  PAGE_LOADED
} from '../constance/pageType';

import { Link } from 'react-router';
import { connect } from 'react-redux';
import { doLogin } from '../actions/userAction';
import { validateLoginForm } from '../common/validator';

import Checkbox from 'material-ui/Checkbox';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import LinearProgress from 'material-ui/LinearProgress';
import { push } from 'react-router-redux';

import '../stylesheets/Login.scss';
class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: '',
      password: '',
      invalidKey: '',
      invalidMsg: ''
    };
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const { pageState, routing, user, push, router } = nextProps;
    const { userName } = user;
    // @warning 这里必须要增加isActive的判断，否则使用ReactCSSTransitionGroup时，会出现死循环的问题
    if (PAGE_LOADED === pageState && userName.length > 0 && router.isActive('/signin')) {
      push('/shoplist');
    }
  }

  getFormData() {
    const { userName, password } = this.state;
    return {
      userName,
      password
    };
  }

  canSubmit() {
    const { pageState } = this.props;
    if (pageState === PAGE_LOADING) {
      return false;
    }
    let formData = this.getFormData();
    const validInfo = validateLoginForm(formData);
    const { bValid, msg, validKey } = validInfo;
    if (false === bValid) {
      this.setState({
        invalidKey: validKey,
        invalidMsg: msg
      });
      return false;
    }
    return true;
  }

  onSubmit() {
    if (false === this.canSubmit()) {
      return;
    }
    const formData = this.getFormData();
    const { doLogin } = this.props;
    if (typeof doLogin === 'function') {
      doLogin(formData);
    }
  }

  onValueChange(stateKey, Proxy, value) {
    let nextState = {
      [stateKey]: value
    };
    if (stateKey === this.state.invalidKey) {
      nextState = {
        invalidMsg: '',
        invalidKey: '',
        ...nextState
      }
    }
    this.setState(nextState);
  }



  render() {
    const { invalidKey, invalidMsg } = this.state;
    const { pageState } = this.props;
    return (
      <div>
        { pageState===PAGE_LOADING ? <LinearProgress mode="indeterminate" /> : null }
        <Paper className={'login-form-wrap'} zDepth={2}>
          <TextField
             hintText="输入用户名"
             floatingLabelText="用户名"
             name={'userName'}
             defaultValue={''}
             errorText={ invalidKey ==='userName' ? invalidMsg : '' }
             onChange={this.onValueChange.bind(this, 'userName')}
             type="text"
           />
          <br />
          <TextField
            hintText="输入密码"
            floatingLabelText="密码"
            name={'password'}
            defaultValue={''}
            errorText={ invalidKey ==='password' ? invalidMsg : '' }
            onChange={this.onValueChange.bind(this, 'password')}
            type="password"
            />
          <br />
          <Checkbox
            defaultChecked={true}
            label={'记住密码'}
            />
          <br />
          <RaisedButton className={'login-submit-btn'} onClick={this.onSubmit} label="登录" primary={true} />
        </Paper>
      </div>
    )
  }
}



const mapStateToProps = (state, ownProps) => {
  const { loginPage, user, routing } = state;
  const { pageState } = loginPage;
  return {
    user,
    pageState,
    routing
  }
};

export default connect(mapStateToProps, {
  doLogin,
  push
})(LoginForm)
